<template>
    <div :class="['txt_scroll_warp',customClass]" ref="textBox">
        <div class="text_list" :class="{'tscroll':isScroll}" ref="textScroll">{{text}}</div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            isScroll:false,
        }
    },
    watch:{
        text(){
            this.getWidth()
        }
    },
    props:['text','customClass'],
    mounted(){
        this.getWidth();
    },
    methods:{
        getWidth(){
            this.$nextTick(()=>{
                this.boxWidth = this.$refs.textBox.getBoundingClientRect().width;
                this.txtWidth = this.$refs.textScroll.getBoundingClientRect().width;

                if( this.txtWidth > this.boxWidth ) this.isScroll = true;
                else this.isScroll = false;
            })
        }
    }
}
</script>
<style lang="scss">
.txt_scroll_warp{
    overflow: hidden;
    position: relative;
    .text_list{
        position: absolute;
        white-space: nowrap;
        &.tscroll{
            animation: infeScroll 15s linear infinite;
        }
    }
    @keyframes infeScroll{
        0%{
            right:-100%;
            transform: translateX(50%);
        }
        100% {
            right:100%;
            transform: translateX(0);
        }
    }

}
</style>
